<!-- 
  @name: 商户详情
  @date: 2020.1.14
 -->
<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="fixed_top" v-if="!onBusi && !onSite">
			<tab-card line-width="100%" :tab-list="tabList" @click-item="onClickItem"></tab-card>
			<view class="separate_line"></view>
		</view>
		
		<!-- 商家资质 -->
		<view class="infoview" :class="onBusi ? 't2' : ''" v-show="tabIndex === 0">
			<!-- 商户基本信息 -->
			<view class="info">
				<view class="item">
					<text class="left">公司名称</text>
					<text class="right" v-text="info.companyName ? info.companyName : '暂无'"></text>
				</view>
				<view class="item">
					<text class="left">企业法人</text>
					<text class="right" v-text="info.storeOwer ? info.storeOwer : '暂无'"></text>
				</view>
				<view class="item">
					<text class="left">公司地址</text>
					<text class="right" v-text="info.storeAddress ? info.storeAddress : '暂无'"></text>
				</view>
			</view>
			
			<!-- 企业营业执照 -->
			<view class="license">
				<view class="title">企业营业执照</view>
				<view class="img" v-if="info.storeLicenseImg">
					<image class="i" :src="info.storeLicenseImg"></image>
				</view>
				<view class="img" v-else>暂无</view>
			</view>
			
			<!-- 授权证书 -->
			<!-- <view class="empower">
				<view class="title">品牌授权</view>
				<view class="img" v-if="picList.length > 0">
					<image class="i" v-for="(item, index) in picList" :key="index" :src="item"></image>
				</view>
				<view class="img" v-else>暂无</view>
			</view> -->
		</view>
		
		<!-- 所辖加注站 -->
		<view class="sta-list" :class="onSite ? 't2' : ''" v-show="tabIndex === 1">
			<!-- 站点card -->
			<view class="card" v-for="(item, index) in lists" :key="item.siteId">
				<view class="left" @tap="$navigateTo('./index?siteId=' + item.siteId)">
					<text class="name text_over">{{item.siteName}}</text>
					<text class="addr text_over">{{item.siteAddress}}</text>
				</view>
				<view class="right">
					<view class="icon" @tap="$navStart(item.latitude, item.longitude)"></view>
					<text class="distance">{{item.distance}}KM</text>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					companyName: '',
					storeOwer: '',
					storeAddress: '',
					storeLicenseImg: ''
				},  //运营商信息
				picList: [],  //授权证书
				tabList: ['商家资质', '经营站点'],  //选项卡
				tabIndex: 0,  //选项卡初始面板
				onBusi: false,  //页面类型，true则代表只显示商户信息
				onSite: false,  //页面类型，true则代表只显示加注站
				lists: [],  //加注站列表
				page: 1,  //加注站页码
				couponId: '',  //优惠券id
				operaId: '',  //运营商id
			}
		},
		onLoad(e) {
			console.log(e);
			this.operaId = e.operaId;
			this.couponId = e.couponId;
			this.onBusi = e.onBusi ? true : false;
			this.onSite = e.onSite ? true : false;
			if(!this.onBusi && !this.onSite) {
				this.getOperaInfo();
				this.getListOpa();
			} else if(this.onBusi) {
				this.getOperaInfo();
			} else if(this.onSite) {
				this.tabIndex = 1;
				if(e.couponId) {
					this.getListTic();
				} else if(e.operaId) {
					this.getListOpa();
				}
			}
		},
		onReady() {
			if(this.onBusi) {
				uni.setNavigationBarTitle({
					title: '商家资质'
				});
			} else if(this.onSite) {
				uni.setNavigationBarTitle({
					title: '可用加注站'
				});
			}
		},
		onReachBottom() {
			if(this.tabIndex === 1) {
				if(this.operaId) {
					this.getListOpa();
				} else if(this.couponId) {
					this.getListTic();
				}
			}
		},
		methods: {
			//选项卡
			onClickItem(index) {
				if(this.tabIndex !== index) {
					this.tabIndex = index;
				}
			},
			//只显示可用加注站时
			//处理信息
			deal(arr) {
				if(arr && arr.length > 0) {
					arr.forEach(item => {
						item = this.convert2TecentMap(item);
						item.latitude = parseFloat(item.siteLat);
						item.longitude = parseFloat(item.siteLng);
						item.distance = this.$mapDistance(
							item.latitude,
							item.longitude,
							this.$store.state.location.latitude,
							this.$store.state.location.longitude
						);
					});
					this.lists = this.lists.concat(arr);
					this.lists.sort((a,b) => a.distance - b.distance);
					this.page += 1;
				}
			},
			//获取优惠券可用加注站
			getListTic() {
				this.$http({
					url: this.$api.couponUrl + 'getcouponlistbysite',
					data: {
						couponId: this.couponId,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					}
				}).then(res => {
					this.deal(res);
				})
			},
			//获取运营商下属的加注站
			getListOpa() {
				this.$http({
					url: this.$api.siteUrl + 'getfillsitelistbyoperaId',
					data: {
						operaId: this.operaId,
						page: this.page,
						rows: 999
					}
				}).then(res => {
					this.deal(res);
				});
			},
			//获取运营商详情
			getOperaInfo() {
				this.$http({
					url: this.$api.siteUrl + 'getfilloperatordetail',
					data: {
						operaId: this.operaId
					}
				}).then(res => {
					this.info = res;
					this.picList = res.storeAuthImg.split(',');
				});
			},
			// 转换地图坐标
			convert2TecentMap(obj) {
				if (obj.siteLng == '' && obj.siteLat == '') {
					return obj;
				}
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0
				var x = obj.siteLng - 0.0065
				var y = obj.siteLat - 0.006
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
				var qqlng = z * Math.cos(theta)
				var qqlat = z * Math.sin(theta)
				obj.siteLng = qqlng;
				obj.siteLat = qqlat;
				return obj;
			}
		}
	}
</script>

<style lang="scss">
	.infoview {
		width: 750rpx;
		margin-top: $spacing-col + $tab-card-heg;
	}
	.infoview.t2 {
		margin-top: $spacing-col;
	}
	
	/* 商户基本信息 */
	.info {
		width: 750rpx;
		padding: 10rpx 30rpx;
		background-color: $color-white;
		.item{
			width: 100%;
			display: flex;
			flex-direction: row;
			margin: 40rpx 0;
			font-size: 30rpx;
			.left {
				flex: 1;
			}
			.right {
				color: $color-grey;
			}
		}
	}
	
	/* 企业营业执照 */
	.license {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 40rpx 30rpx;
		background-color: $color-white;
		.title {
			width: 100%;
			font-size: 30rpx;
		}
		.img {
			width: 100%;
			margin-top: 24rpx;
			text-align: center;
			box-shadow: $box-shadow;
			padding: 33rpx 0;
			.i {
				width: 604rpx;
				height: 426rpx;		
			}
		}
	}
	
	/* 授权证书 */
	.empower {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 40rpx 0;
		background-color: $color-white;
		.title {
			width: 100%;
			padding-left: 30rpx;
			font-size: 30rpx;
		}
		.img {
			padding: 14rpx;
			.i {
				display: inline-block;
				width: 330rpx;
				height: 466rpx;
				margin: 14rpx;
			}
		}
	}
	
	/* 站点card */
	.sta-list.t2 {
		margin-top: 0;
	}
	.sta-list {
		width: 750rpx;
		margin-top: $tab-card-heg;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		.card {
			width: 100%;
			margin-top: 35rpx;
			padding: 30rpx 39rpx;
			box-shadow: $box-shadow;
			background-color: $color-white;
			border-radius: $border-radius-bm;
			display: flex;
			flex-direction: row;
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				.name {
					font-size: 30rpx;
					font-weight: bold;
				}
				.addr {
					color: #4D4D4D;
					margin-top: 30rpx;
				}
			}
			.right {
				width: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.icon {
					width: 53rpx;
					height: 52rpx;
					background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14UKiCAQEyYAAAHcKOac2M223.png');
				}
				.distance {
					margin-top: 25rpx;
					font-size: 26rpx;
					font-family: $font-family-num;
				}
			}
		}
	}
</style>
